
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
} from 'react-native';

import { NavigationActions } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
   
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
            title: '首頁',
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>首頁</Text>
            </View>
        );
    }
}

class FriendScreen extends React.Component {
   
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
            title: '通讯录',
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>通讯录</Text>
            </View>
        );
    }
}


class FindScreen extends React.Component {
   
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
            title: '發現',
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>發現</Text>
            </View>
        );
    }
}


class OwnScreen  extends React.Component {
   
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
            title: '我',
        }
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>我</Text>
            </View>
        );
    }
}


export default App = TabNavigator(
    {
        HomeScreen: {
            screen: HomeScreen,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({ tintColor }) => (<Image source={require('./resource/home.png')} style={{ tintColor: tintColor, width: 20, height: 20 }} />)
            }
        },
        FriendScreen: {
            screen: FriendScreen,
            navigationOptions: {
                tabBarLabel: '通讯录',
                tabBarIcon: ({ tintColor }) => (<Image source={require('./resource/friend.png')} style={{ tintColor: tintColor, width: 20, height: 20 }} />)
            }
        },
        FindScreen: {
            screen: FindScreen,
            navigationOptions: {
                tabBarLabel: '发现',
                tabBarIcon: ({ tintColor }) => (<Image source={require('./resource/find.png')} style={{ tintColor: tintColor, width: 20, height: 20 }} />)

            },
        },
        OwnScreen: {
            screen: OwnScreen,
            navigationOptions: {
                tabBarLabel: '我',
                tabBarIcon: ({ tintColor }) => (<Image source={require('./resource/own.png')} style={{ tintColor: tintColor, width: 20, height: 20 }} />)
            },
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#e91e63',
        },
        //// tabBar 显示的位置 ，android 默认是显示在页面顶端的 
        tabBarPosition: 'bottom',
        animationEnabled: false, // 切换页面时是否有动画效果
        swipeEnabled: true, // 是否可以左右滑动切换tab 如果设置这个属性，这事例中下面设置的按钮 Go back home | Go to notifications就不好使了
        backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转 
        //第一次加载时，显示的tab
        initialRouteName: 'HomeScreen',
        tabBarOptions: {
            activeTintColor: '#000', // 文字和图片选中颜色
            inactiveTintColor: '#888', // 文字和图片未选中颜色
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            showLabel: true, // android 是否展现文字 默认 true 
            upperCaseLabel: false, //android 文字是否需要大写 默认true 
            pressColor: '#999', // android 按压时显示的颜色 
            scrollEnabled: false,
            indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
            },
            style: {
                backgroundColor: '#ffffff', // TabBar 背景色
                // height: 50,
            },
            labelStyle: {
                fontSize: 15, // 文字大小
                paddingTop: 0,
                marginTop: 0,
            },
            tabStyle: {
                marginTop: 8,
                height: 45,
            },
        },
    });

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
});